@font-face {
  font-family:Mulish;
  src: url('../Mulish/static/Mulish-Medium.ttf');
}
body{
  background-color:#ffffff;
  margin:0px;
  padding:0px;
  font-family: 'Mulish', serif;
  font-weight: 400;
}
#overflow{
  overflow-x:hidden;
}
nav{
  height:95px;
  width:100%;
}
#large{
  z-index:4;
  position:relative;
  transition:0.4s ease-in-out;
   float:right;
   display:flex;
   flex-direction:row;
   height:95px;
   width:100%;
   text-align: center;
}
#navbar {
  border-radius:5px;
  background:#ffffff;
  box-shadow:5px 5px 5px grey;
  z-index:20;
  display:inline-block;
  position:fixed;
  margin:0px;
  padding:0;
  height:95px;
  width:100%;
}
#menu{
  position:fixed;
  right:0px;
  display:inline-block;
  float:right;
  margin:15px;
  z-index:10;
}
#test{
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:flex;
   flex-direction:row;
}
.line{
  position:relative;
  height:5px;
  margin:10px;
  background:black;
  width:50px;
  border-radius:20px;
  transform:rotate(0deg);
}
#active{
color:#0000cc;
}
.item1{
  color:black;
  text-decoration:none;
 margin:20px;
 margin-top:23px;
 margin-bottom:0px;
 padding:15px;
 position:relative;
display:block;
font-size:17px;
margin-left:30px;
max-width:100%;
transition:0.4s ease-in-out;
border-radius:50px;
z-index:2;
font-weight:590;
}
.item1:hover{
font-size:28px;
color:#0000b3;
}
.item1 a{
  color:black;
  text-decoration:none;
}
#work-types{
  display:none;
  background:#fff;
  box-shadow:black 4px 4px 4px;
  padding:20px;
  border-radius:10px;
position:relative;
margin:0px;
}
#large button{
  background:none;
  border:none;
  margin-top:20px;
}
#revealer{
  width:20px;
  transform:rotate(270deg);
}
#work{
  border-radius:0px;
  border-bottom: 1px solid black;
  padding:0px;
  font-size:15px;
margin:20px;
transition:0.4s ease-in-out;
}
#work:first-child{
  margin-top:10px;
}
#work:hover{
font-size:20px;
color:#0000b3;

}
#logo {
  width:130px;
  margin:10px;
float:left;

}
#second-logo{
  margin:20px;
  width:150px;
  display:none;
  
}
footer{
  position:relative;
  margin-top:80px;
  width:100%;
  background-color:#000d1a;
  height:30pc;
  padding:5px;
  text-align:center;
}
#logofooter{
  position:relative;
  text-align:center;
  top:100px;
}
#socialmedia{
  position:relative;
  display:inline-block;
  top:125px;
}
.soc-icon{
  position:relative;
  top:0px;
width:100%;
height:100%;
}
.icons{
  float:left;
  display:block;
  width:50px;
  border-radius: 20px;
  margin:5px;
  border-radius:40px;
}
.item2{
  color:black;
  background:white;
  text-decoration:none;
  padding:20px;
  border-radius:20px;
  transition:0.4s;
  margin:10px;
  border:none;
  float:left;
}
#forms{
position:absolute;
text-align:center;
width:99%;
top:0px;
}
#logo-footer{
  width:150px;
}
#language{
  position:relative;
  display:flex;
  flex-direction: column;
  color:white;
  font-size:17px;
  top:125px;
}
.lang{
  margin:2px;
  transition:0.4s ease-in-out;
}
.lang:hover{
  color:#b32400;
}

.item2:hover{
    background-color:black;
    color:white;
}
#officialinfo{
  position:relative;
  border-top:1px solid white;
  color:white;
  text-align:center;
  top:40%;
}
#officialinfo p{
  float:left;
  margin:10px;
}
@media screen and (max-width:740px){
  #test{
    flex-direction: column;
  }
  #drop{
    margin-left:15px;
  }
  #work{
    margin:15px;
  }
  #work-types{
background-color:white;
box-shadow:none;
  }
#large{
display:none;
 box-shadow:4px 4px 4px 4px grey !important;
}
#logofooter{
  top:0px;
}
#officialinfo{
  top:50%;
}
.item1{
  margin-top:10px;
}
#menu{
display:block !important;
}
footer{
  padding-top:50px;
  height:43pc;
}
.item2{
  float:none;
}
#forms{
  top:50%;
}
#language{
  top:-50px;
  text-align:center;
}
#socialmedia{
  top:125px;
}
}
@media screen and (min-width:740px){
#large {
  position:relative !important;
  left:0px !important;
  display:flex!important;
  flex-direction:row !important;
  width:575px !important;
  
}
#test{
  position:relative !important;
  top:0% !important;
  left:0% !important;
  transform: translate(0, 0)!important;
  display:flex!important;
  flex-direction:row !important;
}
#logo{
  display:block !important;
}
#second-logo{
  display:none !important;
  width:150px;
  height:94.6px;
float:left;
}
#menu{
display:none !important;
}
}